<template>
  <div class="time-period-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2 class="page-title">时间段管理</h2>
      <el-button type="primary" icon="el-icon-plus" @click="showAddDialog = true">
        新增时间段
      </el-button>
    </div>

    <!-- 快速操作卡片 -->
    <el-row :gutter="20" class="quick-actions">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="action-card" shadow="hover" @click.native="handleQuickReserve">
          <div class="action-content">
            <div class="action-icon reserve">
              <i class="el-icon-time"></i>
            </div>
            <div class="action-info">
              <div class="action-title">快速预约</div>
              <div class="action-desc">查看可预约时间段</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="action-card" shadow="hover" @click.native="handleBatchSet">
          <div class="action-content">
            <div class="action-icon batch">
              <i class="el-icon-setting"></i>
            </div>
            <div class="action-info">
              <div class="action-title">批量设置</div>
              <div class="action-desc">批量设置时间段</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="action-card" shadow="hover" @click.native="handleViewCalendar">
          <div class="action-content">
            <div class="action-icon calendar">
              <i class="el-icon-date"></i>
            </div>
            <div class="action-info">
              <div class="action-title">日历视图</div>
              <div class="action-desc">查看预约日历</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 搜索筛选区域 -->
    <el-card class="search-card" shadow="never">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="父级场所">
          <el-select v-model="searchForm.venueId" placeholder="请选择父级场所" clearable>
              <el-option
                    v-for="item in venueOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.status == 0"
                  >
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分区名称" >
          <el-input  v-model="searchForm.name"/>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="searchForm.periodDate"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="可预约" :value="1"></el-option>
            <el-option label="已预约" :value="2"></el-option>
            <el-option label="维护中" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 时间段列表 -->
    <el-card class="table-card" shadow="never">
      <div class="table-header">
        <div class="table-title">时间段列表</div>
        <div class="table-actions">
          <el-button size="small" icon="el-icon-download" @click="handleExport">导出</el-button>
          <el-button size="small" type="warning" icon="el-icon-refresh" @click="handleBatchRefresh">批量刷新</el-button>
        </div>
      </div>
      
      <el-table :data="timePeriodList" v-loading="loading" stripe>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="venueName" label="父级场所" min-width="150"></el-table-column>
        <el-table-column prop="name" label="分区名称" width="100"></el-table-column>
        <el-table-column prop="courtIndex" label="分区号" width="80">
          <template slot-scope="scope">
            {{ scope.row.courtIndex }}号场
          </template>
        </el-table-column>
        <el-table-column prop="periodDate" label="日期" width="120"></el-table-column>
        <el-table-column label="时间段" width="160">
          <template slot-scope="scope">
            {{ formatTime(scope.row.beginTime) }} - {{ formatTime(scope.row.endTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="100">
          <template slot-scope="scope">
            <span class="price">¥{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">{{ getStatusLabel(scope.row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="reservedBy" label="预约人" width="120">
          <template slot-scope="scope">
            {{ scope.row.reservedBy || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="reservedAt" label="预约时间" width="160">
          <template slot-scope="scope">
            {{ scope.row.reservedAt ? formatDateTime(scope.row.reservedAt) : '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 1" size="mini" type="success" icon="el-icon-check" @click="handleReserve(scope.row)">预约</el-button>
            <el-button v-if="scope.row.status === 2" size="mini" type="warning" icon="el-icon-close" @click="handleCancel(scope.row)">取消</el-button>
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 新增/编辑时间段对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showAddDialog"
      width="600px"
      :close-on-click-modal="false">
      <el-form :model="timePeriodForm" :rules="timePeriodRules" ref="timePeriodForm" label-width="100px">
        <el-form-item label="父级场所" prop="venueId">
          <el-select v-model="timePeriodForm.venueId" placeholder="请选择父级场所" style="width: 100%" >
            <!-- <el-option label="体育中心篮球场" :value="1"></el-option>
            <el-option label="奥林匹克羽毛球馆" :value="2"></el-option> -->
              <el-option
                    v-for="item in venueOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.status == 0"
                  >
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分区名称" prop="name">
          <el-input  v-model="timePeriodForm.name"
                placeholder="请输入分区名称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="分区" prop="partitionId">
          <el-select v-model="timePeriodForm.partitionId" placeholder="请选择分区" style="width: 100%">
            <el-option label="A区" :value="1"></el-option>
            <el-option label="B区" :value="2"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="分区号" prop="courtIndex">
          <el-input-number v-model="timePeriodForm.courtIndex" :min="1" :max="10" style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="日期" prop="periodDate">
          <el-date-picker
            v-model="timePeriodForm.periodDate"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="开始时间" prop="beginTime">
          <el-time-picker
            v-model="timePeriodForm.beginTime"
            placeholder="选择开始时间"
            format="HH:mm"
            value-format="HH:mm"
            style="width: 100%">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-time-picker
            v-model="timePeriodForm.endTime"
            placeholder="选择结束时间"
            format="HH:mm"
            value-format="HH:mm"
            style="width: 100%">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input-number v-model="timePeriodForm.price" :min="0" :precision="2" style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="timePeriodForm.status" placeholder="请选择状态" style="width: 100%">
            <el-option label="可预约" :value="1"></el-option>
            <el-option label="维护中" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">确定</el-button>
      </div>
    </el-dialog>

    <!-- 预约对话框 -->
    <el-dialog
      title="预约时间段"
      :visible.sync="showReserveDialog"
      width="500px">
      <el-form :model="reserveForm" :rules="reserveRules" ref="reserveForm" label-width="100px">
        <el-form-item label="预约人" prop="userName">
          <el-input v-model="reserveForm.userName" placeholder="请输入预约人姓名"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="reserveForm.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="reserveForm.remark" type="textarea" placeholder="请输入备注信息"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showReserveDialog = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmReserve" :loading="reserving">确认预约</el-button>
      </div>
    </el-dialog>

    <!-- 批量设置对话框 -->
    <el-dialog
      title="批量设置时间段"
      :visible.sync="showBatchDialog"
      width="700px">
      <el-form :model="batchForm" ref="batchForm" label-width="100px">
        <el-form-item label="场所">
          <el-select v-model="batchForm.venueId" placeholder="请选择场所" style="width: 100%">
            <el-option label="西湖风景区" :value="1"></el-option>
            <el-option label="西溪湿地风景区" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="batchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="时间段">
          <el-row :gutter="10">
            <el-col :span="11">
              <el-time-picker
                v-model="batchForm.startTime"
                placeholder="开始时间"
                format="HH:mm"
                value-format="HH:mm"
                style="width: 100%">
              </el-time-picker>
            </el-col>
            <el-col :span="2" style="text-align: center; line-height: 40px;">至</el-col>
            <el-col :span="11">
              <el-time-picker
                v-model="batchForm.endTime"
                placeholder="结束时间"
                format="HH:mm"
                value-format="HH:mm"
                style="width: 100%">
              </el-time-picker>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="时长(分钟)">
          <el-input-number v-model="batchForm.duration" :min="30" :max="240" :step="30" style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="价格">
          <el-input-number v-model="batchForm.price" :min="0" :precision="2" style="width: 100%"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showBatchDialog = false">取消</el-button>
        <el-button type="primary" @click="handleBatchSubmit" :loading="batchSubmitting">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { timePeriodAPI } from '../api/timePeriod.js'
import { venueAPI } from '../api/venue.js'

export default {
  name: 'TimePeriodManagement',
  data() {
    return {
      loading: false,
      submitting: false,
      reserving: false,
      batchSubmitting: false,
      showAddDialog: false,
      showReserveDialog: false,
      showBatchDialog: false,
      isEdit: false,
      currentTimePeriod: null,
      //场所
      venueOptions: undefined,
      searchForm: {
        venueId: '',
        partitionId: '',
        name:'',
        periodDate: '',
        status: ''
      },
      timePeriodForm: {
        id: null,
        venueId: null,
        name: null,
        // courtIndex: 1,
        periodDate: '',
        beginTime: '',
        endTime: '',
        price: 0,
        status: 1
      },
      timePeriodRules: {
        venueId: [{ required: true, message: '请选择场所', trigger: 'change' }],
        name: [{ required: true, message: '请选择分区', trigger: 'change' }],
        // courtIndex: [{ required: true, message: '请输入场所号', trigger: 'blur' }],
        periodDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
        beginTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
        endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
        price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
      },
      reserveForm: {
        userName: '',
        phone: '',
        remark: ''
      },
      reserveRules: {
        userName: [{ required: true, message: '请输入预约人姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
      },
      batchForm: {
        venueId: null,
        dateRange: [],
        startTime: '',
        endTime: '',
        duration: 60,
        price: 0
      },
      timePeriodList: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  computed: {
    dialogTitle() {
      return this.isEdit ? '编辑时间段' : '新增时间段'
    }
  },
  created(){
      this.loadVenueOptions();
  },
  mounted() {
    this.loadVenues()
    this.loadTimePeriodList()
   
  },
  methods: {

    //加载父级场所列表
    async loadVenueOptions() {
      this.loading = true
      try {
        const params = {
          is_deleted: 0,
          status: 1,
          is_open: 1,
          isCreator: 0,
        }
        
        const result =  await venueAPI.list(params)
         // 处理API返回的数据结构
        if (result.data) {
          this.venueOptions = result.data.records || [];
     
        } else {
          // 兼容直接返回分页数据的情况
          this.venueOptions = result.records || [];
        }
        console.log("venueOptions=" + this.venueOptions);

      } catch (error) {
        this.$message.error('加载场所列表失败: ' + error.message)
        // 如果API调用失败，使用模拟数据
        //this.loadMockTimePeriodData()
      } finally {
        this.loading = false
      }


    },
    // 加载时间段列表
    async loadTimePeriodList() {
      this.loading = true
      try {
        const params = {
          current: this.pagination.current,
          size: this.pagination.size,
          venueId: this.searchForm.venueId || undefined,
          periodDate: this.searchForm.periodDate || undefined,
          status: this.searchForm.status || undefined
        }
        
        const result = await timePeriodAPI.list(params)
        this.timePeriodList = result.records || []
        this.pagination.total = result.total || 0
      } catch (error) {
        this.$message.error('加载时间段列表失败: ' + error.message)
        // 如果API调用失败，使用模拟数据
        this.loadMockTimePeriodData()
      } finally {
        this.loading = false
      }
    },

    // 加载模拟时间段数据（API调用失败时的备用方案）
    loadMockTimePeriodData() {
      const mockData = {
        records: [
          {
            id: 1,
            venueName: '体育中心篮球场',
            partitionName: 'A区',
            courtIndex: 1,
            periodDate: '2023-12-15',
            beginTime: { hour: 9, minute: 0 },
            endTime: { hour: 11, minute: 0 },
            price: 120.00,
            status: 1,
            reservedBy: null,
            reservedAt: null
          },
          {
            id: 2,
            venueName: '体育中心篮球场',
            partitionName: 'A区',
            courtIndex: 1,
            periodDate: '2023-12-15',
            beginTime: { hour: 14, minute: 0 },
            endTime: { hour: 16, minute: 0 },
            price: 120.00,
            status: 2,
            reservedBy: '张三',
            reservedAt: '2023-12-01 14:30:00'
          }
        ],
        total: 2
      }
      
      this.timePeriodList = mockData.records
      this.pagination.total = mockData.total
    },

    // 加载场所列表
    async loadVenues() {
      try {
        const result = await venueAPI.list({ current: 1, size: 100 })
        this.venues = (result.records || []).map(venue => ({
          id: venue.id,
          name: venue.name
        }))
      } catch (error) {
        console.warn('加载场所列表失败，使用默认数据:', error.message)
      }
    },

    // 搜索
    handleSearch() {
      this.pagination.current = 1
      this.loadTimePeriodList()
    },

    // 重置
    handleReset() {
      this.searchForm = {
        venueId: '',
        partitionId: '',
        periodDate: '',
        status: ''
      }
      this.handleSearch()
    },

    // 快速预约
    handleQuickReserve() {
      this.showReserveDialog = true

    },

    // 批量设置
    handleBatchSet() {
      this.showBatchDialog = true
    },

    // 查看日历
    handleViewCalendar() {
      this.$message.info('跳转到日历视图')
    },

    // 预约
    handleReserve(row) {
      this.currentTimePeriod = row
      this.showReserveDialog = true
    },

    // 取消预约
    async handleCancel(row) {
      try {
        await this.$confirm('确认取消该时间段的预约吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await timePeriodAPI.release({ timePeriodId: row.id })
        this.$message.success('取消预约成功')
        this.loadTimePeriodList()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('取消预约失败: ' + error.message)
        }
      }
    },

    // 编辑
    handleEdit(row) {
      this.isEdit = true
      this.timePeriodForm = { ...row }
      this.showAddDialog = true
    },

    // 删除
    async handleDelete(row) {
      try {
        await this.$confirm('确认删除该时间段吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await timePeriodAPI.removeById(row.id)
        this.$message.success('删除成功')
        this.loadTimePeriodList()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败: ' + error.message)
        }
      }
    },

    // 导出
    handleExport() {
      this.$message.success('导出成功')
    },

    // 批量刷新
    handleBatchRefresh() {
      this.loadTimePeriodList()
      this.$message.success('刷新成功')
    },

    // 场所变更
    handleVenueChange(venueId) {
      this.timePeriodForm.partitionId = null
    },

    // 确认预约
    async handleConfirmReserve() {
      try {
        await this.$refs.reserveForm.validate()
        this.reserving = true
        
        await timePeriodAPI.reserveV2({
          timePeriodId: this.currentTimePeriod.id,
          userName: this.reserveForm.userName,
          phone: this.reserveForm.phone,
          remark: this.reserveForm.remark
        })
        
        this.$message.success('预约成功')
        this.showReserveDialog = false
        this.resetReserveForm()
        this.loadTimePeriodList()
      } catch (error) {
        if (error !== false) {
          this.$message.error('预约失败: ' + error.message)
        }
      } finally {
        this.reserving = false
      }
    },

    // 提交表单
    handleSubmit() {
      this.$refs.timePeriodForm.validate(valid => {
        if (valid) {
          this.submitting = true
          setTimeout(() => {
            this.$message.success(this.isEdit ? '更新成功' : '新增成功')
            this.showAddDialog = false
            this.submitting = false
            this.resetForm()
            this.loadTimePeriodList()
          }, 1000)
        }
      })
    },

    // 批量提交
    handleBatchSubmit() {
      if (!this.batchForm.venueId || !this.batchForm.dateRange.length || !this.batchForm.startTime || !this.batchForm.endTime) {
        this.$message.warning('请填写完整信息')
        return
      }
      this.batchSubmitting = true
      setTimeout(() => {
        this.$message.success('批量设置成功')
        this.showBatchDialog = false
        this.batchSubmitting = false
        this.resetBatchForm()
        this.loadTimePeriodList()
      }, 1500)
    },

    // 重置表单
    resetForm() {
      this.isEdit = false
      this.timePeriodForm = {
        id: null,
        venueId: null,
        partitionId: null,
        courtIndex: 1,
        periodDate: '',
        beginTime: '',
        endTime: '',
        price: 0,
        status: 1
      }
      this.$refs.timePeriodForm && this.$refs.timePeriodForm.resetFields()
    },

    // 重置预约表单
    resetReserveForm() {
      this.reserveForm = {
        userName: '',
        phone: '',
        remark: ''
      }
      this.$refs.reserveForm && this.$refs.reserveForm.resetFields()
    },

    // 重置批量表单
    resetBatchForm() {
      this.batchForm = {
        venueId: null,
        dateRange: [],
        startTime: '',
        endTime: '',
        duration: 60,
        price: 0
      }
    },

    // 分页
    handleSizeChange(size) {
      this.pagination.size = size
      this.loadTimePeriodList()
    },

    handleCurrentChange(current) {
      this.pagination.current = current
      this.loadTimePeriodList()
    },

    // 获取状态标签样式
    getStatusTagType(status) {
      const statusMap = {
        0: 'warning',  // 维护中
        1: 'success',  // 可预约
        2: 'info'      // 已预约
      }
      return statusMap[status] || 'info'
    },

    // 获取状态标签文本
    getStatusLabel(status) {
      const statusMap = {
        0: '维护中',
        1: '可预约',
        2: '已预约'
      }
      return statusMap[status] || '未知'
    },

    // 格式化时间
    formatTime(timeObj) {
      if (!timeObj) return ''
      const hour = String(timeObj.hour).padStart(2, '0')
      const minute = String(timeObj.minute).padStart(2, '0')
      return `${hour}:${minute}`
    },

    // 格式化日期时间
    formatDateTime(dateTime) {
      if (!dateTime) return ''
      return dateTime.replace('T', ' ').substring(0, 19)
    }
  }
}
</script>

<style scoped>
.time-period-management {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 4px;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1d39c4;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.quick-actions {
  margin-bottom: 20px;
}

.action-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(29, 57, 196, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(29, 57, 196, 0.15);
}

.action-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.action-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: white;
}

.action-icon.reserve {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.action-icon.batch {
  background: linear-gradient(135deg, #ffa726 0%, #ff7043 100%);
}

.action-icon.calendar {
  background: linear-gradient(135deg, #66bb6a 0%, #43a047 100%);
}

.action-info {
  flex: 1;
}

.action-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d39c4;
  margin-bottom: 5px;
}

.action-desc {
  font-size: 14px;
  color: #666;
}

.search-card {
  margin-bottom: 20px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(29, 57, 196, 0.08);
}

.search-form {
  margin-bottom: 0;
}

.table-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(29, 57, 196, 0.08);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-title {
  font-size: 18px;
  font-weight: 600;
  color: #1d39c4;
}

.table-actions {
  display: flex;
  gap: 10px;
}

.price {
  font-weight: 600;
  color: #f56c6c;
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: right;
}

.dialog-footer {
  text-align: right;
}

/* Element UI 样式覆盖 */
::v-deep .el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

::v-deep .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

::v-deep .el-input__inner {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

::v-deep .el-input__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

::v-deep .el-select .el-input__inner {
  border-radius: 8px;
}

::v-deep .el-table {
  border-radius: 8px;
  overflow: hidden;
}

::v-deep .el-table th {
  background: linear-gradient(135deg, #f8f9ff 0%, #f1f3ff 100%);
  color: #1d39c4;
  font-weight: 600;
  border: none;
}

::v-deep .el-table td {
  border: none;
  border-bottom: 1px solid #f0f2f5;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #fafbff;
}

::v-deep .el-pagination {
  text-align: right;
}

::v-deep .el-pagination .el-pager li {
  border-radius: 6px;
  margin: 0 2px;
}

::v-deep .el-pagination .el-pager li.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

::v-deep .el-dialog {
  border-radius: 12px;
  overflow: hidden;
}

::v-deep .el-dialog__header {
  background: linear-gradient(135deg, #f8f9ff 0%, #f1f3ff 100%);
  padding: 20px 24px;
}

::v-deep .el-dialog__title {
  color: #1d39c4;
  font-weight: 600;
  font-size: 18px;
}

::v-deep .el-form-item__label {
  color: #1d39c4;
  font-weight: 500;
}

::v-deep .el-tag {
  border-radius: 6px;
  font-weight: 500;
}

::v-deep .el-card__body {
  padding: 20px;
}

@media (max-width: 768px) {
  .time-period-management {
    padding: 10px;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .quick-actions {
    margin-bottom: 15px;
  }
  
  .search-form {
    display: block;
  }
  
  .search-form .el-form-item {
    display: block;
    margin-bottom: 15px;
  }
  
  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .table-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
</style>